import React from 'react'
import { Routes, Route, NavLink } from 'react-router-dom'
import Home from '@/pages/Home'
import Detail from '@/pages/Detail'

const App = () => {
  return (
    <>
      <ul>
        <li>
          {/* 
          自定义高亮显示处理方案 ==> 回调函数方式
          isActive: 如果当前to地址和地址栏地址一样则为true,否则为false
          NavLink和Link新增了属性 state/replace
          NavLink => end它和之前exact =》 严格  现在默认就是不用去写, 首页/ => end属性
          */}
          <NavLink to="/" end>
            首页
          </NavLink>
        </li>
        <li>
          <NavLink
            replace
            className={({ isActive }) => (isActive ? 'aaa' : '')}
            to="/detail/3?name=ccc"
            state={{ age: 300 }}
          >
            新闻3
          </NavLink>
        </li>
        <li>
          <NavLink
            replace
            className={({ isActive }) => (isActive ? 'aaa' : '')}
            to="/detail/4?name=ddd"
            state={{ age: 400 }}
          >
            新闻4
          </NavLink>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </>
  )
}

export default App
